<template>
  <img class="avatar"
       :style="size"
       :src="avatarSrc||avatar"
       :onerror="defaultAvatar" />
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Avatar',
  props: {
    avatarDiameter: {
      type: String,
      default: '36px'
    },
    avatarSrc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      defaultAvatar: `this.src='${require('images/avatar/default.jpg')}'`
    }
  },
  computed: {
    ...mapGetters(['avatar']),
    size () {
      return {
        '--avatar-diameter': this.avatarDiameter
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.avatar
  display block
  width var(--avatar-diameter)
  height var(--avatar-diameter)
  border-radius 50%
  object-fit contain
</style>
